<?php echo $this->Html->css('admin/admin_organisations_index'); ?>
<style>
    .big_group {
        border: solid #ccc 1px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 1px 1px 4px #ccc;
        display: block;
        height: 350px;
    }

    .groups_list {
        display: table;
        width: 100%;
    }
    .groups_list, .groups_list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .groups_list ul {
        overflow: auto;
        height: 250px;
    }

    .groups_list ul li {
        padding: 3px;
        overflow: hidden;
    }

    .groups_list ul li:hover {
        background-color: #f9f9f9;
    }

    .groups_list ul li.selected {
        background-color: #f9f9f9;
    }

    .groups_list .category_name {
        font-weight: bold;
        padding: 4px;
        width: 70%;
        cursor: pointer;
    }

    .groups_list .group_name, .groups_list .date_name {
        padding: 4px;
        cursor: pointer;
        width: 78%;
    }

    .groups_list .editable {
        border: solid #eee 2px;
        box-shadow: inset -1px -1px 3px #f9f9f9;
        padding: 2px;
        border-radius: 4px;
        background-color: #fff;
    }

    .groups_list .disabled {
        color: #f5f5f5;
        text-shadow: 0px 1px 1px #fafafa;
    }

    .groups_list .options {
        text-align: right;
        padding: 3px;
    }

    .groups_list .options a {
        color: #0088cc;
        text-decoration: none;
        padding: 5px;
    }

    .groups_list .column {
        display: table-cell;
        min-height: 200px;
        border-right: solid #f8f8f8 1px;
    }

    /*    .groups_list .column:not(:last-child) {
            border-right: solid #f8f8f8 1px;
        }*/

    .groups_list .column header {
        border-bottom: solid #f8f8f8 1px;
        overflow: hidden;
        vertical-align: middle;
        padding: 0px 4px;
        box-sizing: border-box;
    }

    .groups_list .column header h5 {

    }

    .groups_list .column header .btn {
        margin-top: 5px;
    }

    .groups_list .options a.remove-link {
        color: red;
    }
</style>

<div class="" id="container">

    <div class="row">
        <div class='col-lg-12'>

            <div class="panel">
                
                <div id="groups_block" class="panel-body">

                    <div class="col-lg-12">
                        <h4>Anniversaries</h4>

                        <p class="alert alert-info">Use the <i class="fa fa-plus-square"></i> button below to add 
                            anniversary types for which you would like to collect data.
                        </p>

                        <section class="groups_list">
                            <div class="col-lg-4 column">
                                <header style="overflow: hidden;">
                                    <h5 class="pull-left">Anniversary Types</h5>
                                    <button class="btn btn-xs pull-right" id="add_date"><i class="fa fa-plus"></i></button>
                                </header>

                                <ul id="dates">
                                    <?php foreach ($dates as $date) { ?>
                                        <li style="overflow: hidden;">
                                            <div class="date_name pull-left" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                                <?php echo $date['OrganisationAnniversary']['name']; ?>
                                            </div>

                                            <div class="options pull-right">
                                                <a href="#" class="remove-link" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                                    <i class="fa fa-trash-o"></i>
                                                </a>
                                            </div>
                                        </li>
                                    <?php } ?>
                                </ul>
                            </div>
                            
                            <div class="col-lg-6 column">
                                <header style="overflow: hidden;">
                                    <h5 class="pull-left">Anniversary Details</h5>
                                </header>

                                <ul id="anniv_info">
                                    
                                </ul>
                            </div>

                        </section>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="save-changes-url" value="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'org_groups')); ?>" />

<?php
echo $this->Html->script('plugins/jquery.trocar/jquery.trocar.js');
echo $this->Html->script('app/views/settings/anniversaries.js');
?>